import React, { useMemo } from "react"
import { Card, Form, Button, Image, Toast, Modal, Space, Input, Divider } from 'antd-mobile'
import { httpJson } from "../../../../../services/http"


interface IProps {
    props: any
    currentKey: string
    refresh: any
}

const ProductItem: React.FC<IProps> = ({ props, currentKey, refresh }) => {
    const { goodsName, image, id, actualAllowance, monthSell, price, goodsDescribe } = props
    const handleDiscount = () => {
        Modal.show({
            content: <Form>
                <Form.Item label="折扣后价格">
                    <Input />
                </Form.Item>
                <Form.Item label="折扣持续时间">
                    <Input />
                </Form.Item>
            </Form>,
            closeOnMaskClick: true,
            showCloseButton: true,
            actions: [
                {
                    key: 'online',
                    text: '提交',
                    primary: true,
                    onClick: () => { Toast.show('提交成功') }
                }
            ]
        })
    }
    const handleDownSale = () => {
        httpJson('POST', 'api/goods/updateGoodsInfo', { id: id, status: '1' })
            .then(res => {
                Toast.show('下架成功！')
                refresh()
            })
            .catch(err => {
                Toast.show(err)
                console.log(err)
            })
    }
    const handleUpSale = () => {
        httpJson('POST', 'api/goods/updateGoodsInfo', { id: id, status: '0' })
            .then(res => {
                Toast.show('上架成功！')
                refresh()
            })
            .catch(err => {
                Toast.show(err)
                console.log(err)
            })
    }
    const handleEdit = () => {
        localStorage.setItem('goodsName', goodsName)
        localStorage.setItem('productId', id)
        localStorage.setItem('price', price)
        localStorage.setItem('goodsDescribe', goodsDescribe)
        localStorage.setItem('actualAllowance', actualAllowance)
        window.location.href = "http://121.43.147.142:3000/#/grounding"
    }
    const renderBtn = useMemo(() => {
        if (currentKey === '0') {
            return <Button color="default" size="small" onClick={handleDownSale}>下架</Button>
        } else if (currentKey === '1') {
            return <Button color="primary" size="small" onClick={handleUpSale}>上架</Button>
        }
    }, [currentKey])
    return (
        <>
            <Card
                style={{ borderRadius: 0 }}
            >
                <div className="product-card-content" style={{height: '100%'}}>
                    <div className="product-card-content-img"><Image style={{height: '100%'}} src={image} /></div>
                    <div className="product-card-content-info">
                        {goodsName}
                        <div>
                            月售{monthSell}单
                            库存数量{actualAllowance}
                        </div>
                        <div style={{ marginTop: 20 }}>
                            <Space>
                                <Button color="default" size="small" onClick={handleDiscount}>折扣</Button>
                                <Button color="default" size="small" onClick={handleEdit}>编辑</Button>
                                {renderBtn}
                            </Space>
                        </div>
                    </div>
                </div>
                <Divider></Divider>
            </Card>
            
        </>
    )
}

export default ProductItem